<script setup>
import { reactive, ref, getCurrentInstance } from "vue";
import {
  GetListAPI,
  GetDetailedAPI,
  AddDataAPI,
  EditDataAPI,
  DelDataAPI,
} from "@/api/system/ofconfig";
const { proxy } = getCurrentInstance();
const ruleFormRef = ref(null);
// 原有值 及 现有值
const valueBox = ref([]);

const IsIf = ref(false);

// 是否显示 表单 现有值表格
const IsShow = ref(false);

// 位数ISshow
const langth = ref(false);

// 流水号、年、月、日
const ObjData = reactive({
  flowingWater: {},
  year: {},
  month: {},
  day: {},
});

const validatorLangth = (rule, value, callback) => {
  if (value < 10) {
    callback(new Error("位数必须大于等于10！"));
  } else {
    callback();
  }
};

// 表单
const ruleForm = reactive({
  configName: "",
  configType: "",
  Type: "",
});

// 表单校验
const rules = reactive({
  configName: [
    {
      required: true,
      message: "请填写名称",
      trigger: "blur",
    },
  ],
  langth: [
    {
      required: true,
      message: "请填写位数",
      trigger: "blur",
    },
    { validator: validatorLangth },
  ],
});

// 添加
const Add = async (title, type) => {
  IsIf.value = true;
  // 判断 流水 年 月 日
  ruleForm.configType = type;
  ruleForm.Type = title;
  if (title == "流水号位数") {
    ruleForm.configName = "";
    valueBox.value = [];
    rules.langth = [
      {
        required: true,
        message: "请填写位数",
        trigger: "blur",
      },
      { validator: validatorLangth },
    ];
    langth.value = false;
  } else if (title == "年") {
    ruleForm.configName = "";
    delete rules.langth;
    langth.value = true;
    valueBox.value = [];
    for (let i = 0; i < 10; i++) {
      valueBox.value.push({
        ofCodeKey: 2022 + i,
        ofCodeValue: "",
      });
    }
  } else if (title == "月") {
    ruleForm.configName = "";
    delete rules.langth;
    langth.value = true;
    valueBox.value = [];
    for (let i = 0; i < 12; i++) {
      valueBox.value.push({
        ofCodeKey: i + 1,
        ofCodeValue: "",
      });
    }
  } else {
    ruleForm.configName = "";
    delete rules.langth;
    langth.value = true;
    valueBox.value = [];
    for (let i = 0; i < 31; i++) {
      valueBox.value.push({
        ofCodeKey: i + 1,
        ofCodeValue: "",
      });
    }
  }
  // ruleForm.configName = title
  IsShow.value = true;
};

// 删除
const Del = async (val) => {
  const MesBox = await proxy.DelMessageBox();
  if (!MesBox) return;
  const res = await DelDataAPI(val.configId);
  if (res.code !== 200) return;
  proxy.successMsg("删除成功");
  GetList();
  Colse();
};
const FlowingWaterInd = ref(0);
const YearInd = ref(0);
const MonthInd = ref(0);
const DayInd = ref(0);
// 查询明细
const GetDetailed = async (val, type, title, ind) => {
  if (title == "流水号位数") FlowingWaterInd.value = ind;
  if (title == "年") YearInd.value = ind;
  if (title == "月") MonthInd.value = ind;
  if (title == "日") DayInd.value = ind;
  IsIf.value = false;
  const { data: res } = await GetDetailedAPI(val.configId);
  ruleForm.Type = title;
  if (type == "flowingWater") {
    ruleForm.langth = res.detailed?.length;
  } else {
    delete rules.langth;
    langth.value = true;
  }
  valueBox.value = res.detailed;
  ruleForm.configName = val.configName;
  ruleForm.configType = val.configType;
  ruleForm.configId = val.configId;
};

// 位数改变
const LangthChange = (val) => {
  if (val > 50) return proxy.warningMsg("请正确填写位数");
  valueBox.value = [];
  for (let i = 0; i < val; i++) {
    valueBox.value.push({
      ofCodeKey: i,
      ofCodeValue: "",
    });
  }
};

const Submit = () => {
  IsIf.value ? AddSubmit() : EditSubmit();
};
// 新增提交
const AddSubmit = async () => {
  await ruleFormRef.value.validate(async (valid, fields) => {
    // 表单校验
    if (!valid) return;
    // isif 现有值校验
    const isif = valueBox.value.every((item) => item.ofCodeValue);
    if (!isif || valueBox.value.length <= 0)
      return proxy.warningMsg("请填写完整现有值");
    ruleForm.barCode = JSON.stringify(valueBox.value);
    const res = await AddDataAPI(ruleForm);
    if (res.code !== 200) return;
    GetList();
    Colse();
    proxy.Mes("success", "新增成功");
  });
};

// 修改提交
const EditSubmit = async () => {
  await ruleFormRef.value.validate(async (valid, fields) => {
    // 表单校验
    if (!valid) return;
    // isif 现有值校验
    const isif = valueBox.value.every((item) => item.ofCodeValue);
    if (!isif || valueBox.value.length <= 0)
      return proxy.warningMsg("请填写完整现有值");
    ruleForm.barCode = JSON.stringify(valueBox.value);
    const res = await EditDataAPI(ruleForm);
    if (res.code !== 200) return;
    GetList();
    Colse();
    proxy.successMsg("修改成功");
  });
};
const Colse = () => {
  valueBox.value = [];
  ruleForm.configName = "";
  ruleForm.configName = "";
  ruleForm.configType = "";
  ruleForm.Type = "";
};

// 获取流水号、年、月、日 列表数据
const GetList = async () => {
  const res = await GetListAPI();
  ObjData.flowingWater = res.flowingWater;
  ObjData.year = res.year;
  ObjData.month = res.month;
  ObjData.day = res.day;
};

GetList();
</script>
<template>
  <div class="app-comment">
    <div class="header">
      <!-- 流水号位数 -->
      <div class="FlowingWater common">
        <div class="bgc main">
          <div class="title">流水号位数</div>
          <el-icon
            color="#2e91fc"
            @click.stop="Add('流水号位数', 'flowingWater')"
            ><Plus
          /></el-icon>
        </div>
        <div
          class="main"
          :class="{ bgc: index == FlowingWaterInd }"
          @click.stop="GetDetailed(item, 'flowingWater', '流水号位数', index)"
          v-for="(item, index) in ObjData.flowingWater"
          :key="index"
        >
          <span>{{ item.configName }}</span>
          <el-icon @click.stop="Del(item)" color="#2e91fc"><Minus /></el-icon>
        </div>
      </div>
      <!-- 年 -->
      <div class="Year common">
        <div class="bgc main">
          <div class="title">年</div>
          <el-icon color="#2e91fc" @click.stop="Add('年', 'year')"
            ><Plus
          /></el-icon>
        </div>
        <div
          class="main"
          :class="{ bgc: index == YearInd }"
          @click.stop="GetDetailed(item, 'yeat', '年', index)"
          v-for="(item, index) in ObjData.year"
          :key="index"
        >
          <span>{{ item.configName }}</span>
          <el-icon @click.stop="Del(item)" color="#2e91fc"><Minus /></el-icon>
        </div>
      </div>
      <!-- 月 -->
      <div class="Month common">
        <div class="bgc main">
          <div class="title">月</div>
          <el-icon color="#2e91fc" @click.stop="Add('月', 'month')"
            ><Plus
          /></el-icon>
        </div>
        <div
          class="main"
          :class="{ bgc: index == MonthInd }"
          @click.stop="GetDetailed(item, 'month', '月', index)"
          v-for="(item, index) in ObjData.month"
          :key="index"
        >
          <span>{{ item.configName }}</span>
          <el-icon @click.stop="Del(item)" color="#2e91fc"><Minus /></el-icon>
        </div>
      </div>
      <!-- 日 -->
      <div class="Day common">
        <div class="bgc main">
          <div class="title">日</div>
          <el-icon color="#2e91fc" @click.stop="Add('日', 'day')"
            ><Plus
          /></el-icon>
        </div>
        <div
          class="main"
          :class="{ bgc: index == DayInd }"
          @click.stop="GetDetailed(item, 'day', '日', index)"
          v-for="(item, index) in ObjData.day"
          :key="index"
        >
          <span>{{ item.configName }}</span>
          <el-icon @click.stop="Del(item)" color="#2e91fc"><Minus /></el-icon>
        </div>
      </div>
    </div>
    <el-divider />
    <div
      class="buttom flex"
      v-if="valueBox.length > 0 || ruleForm.configType == 'flowingWater'"
    >
      <div class="left">
        <el-form
          ref="ruleFormRef"
          :model="ruleForm"
          :rules="rules"
          label-width="auto"
          label-position="right"
          class="demo-ruleForm"
          status-icon
        >
          <el-form-item label="类型">
            <el-input
              clearable
              disabled
              v-model="ruleForm.Type"
              placeholder="类型"
            />
          </el-form-item>
          <el-form-item label="名称" prop="configName">
            <el-input
              clearable
              v-model="ruleForm.configName"
              placeholder="请输入名称"
            />
          </el-form-item>
          <el-form-item label="进制" prop="langth" v-if="!langth">
            <el-input
              clearable
              v-model="ruleForm.langth"
              @input="LangthChange"
              placeholder="请输入位数"
            />
          </el-form-item>
        </el-form>
      </div>
      <div class="right">
        <div class="valueBox" :class="{ bgc: index % 2 !== 0 }">
          <div>原有值</div>
          <div>现有值</div>
        </div>
        <div class="right_box">
          <div
            class="valueBox"
            :class="{ bgc: index % 2 !== 0 }"
            v-for="(item, index) in valueBox"
            :key="index"
          >
            <div>{{ item.ofCodeKey }}</div>
            <el-input v-model="item.ofCodeValue"></el-input>
          </div>
        </div>
      </div>
      <div class="Btn">
        <el-button type="primary" @click.stop="Submit(ruleFormRef)"
          >保存</el-button
        >
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.header {
  display: flex;
  justify-content: space-around;
}

.bgc {
  background-color: #f2f2f2;
}
.bgc1 {
  background-color: #ffffff;
}
.FlowingWater > div {
  padding: 2px 10px;
}
.common {
  width: 200px;
  margin: 20px;
  border: 1px solid #dedddd;
  height: 200px;
  overflow: auto;
}

.main {
  padding: 2px 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.title {
  font-weight: 700;
}
.buttom {
  display: flex;
  justify-content: space-evenly;
  padding: 0 20px;
}
.left {
  flex: 1;
}
.right {
  margin-left: 50px;
  flex: 1;
}
.right_box {
  height: 300px;
  overflow: auto;
}
.Btn {
  margin-left: 20px;
  flex: 1;
}
.valueBox {
  display: flex;
  div {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 5px 20px;
    border: 1px solid #dedddd;
  }
}
</style>
